<template>
  <div class="popup-content">
    <!-- 我的频道 -->
    <van-cell :border="false">
      <div slot="title" class="popText">我的频道</div>
      <!-- 控制关闭图片的显示和隐藏 -->
      <van-button type="danger" plain size="mini" round class="popEditBtn" @click="cellBtn">{{
        clear ? '完成' : '编辑'
      }}</van-button>
    </van-cell>

    <van-grid :gutter="10" class="myGrid">
      <!-- 关闭图标 -->
      <van-grid-item
        v-for="(value, index) in myChannels"
        :key="index"
        :text="value.name"
        :class="{ popGrid: true, gridActive: indexActive === index }"
        :icon="!fixChannels.includes(value.id) ? clear : ''"
        @click="toggle_deleteChannel(value.id)"
      />
    </van-grid>

    <!-- 频道推荐 -->
    <van-cell :border="false">
      <div slot="title" class="popText">频道推荐</div>
    </van-cell>

    <van-grid :gutter="10" direction="horizontal">
      <van-grid-item
        v-for="value in filterChannels"
        :key="value.id"
        icon="plus"
        :text="value.name"
        class="popGrid"
        @click="toMyChannel(value)"
      />
    </van-grid>
  </div>
</template>

<script>
// 导入获取所有频道的api
import { getAllChannels } from '@/assets/api/channel.js'

export default {
  name: 'popup-content',
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    indexActive: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      // 控制关闭图标的显示
      clear: '',
      // 所有频道列表
      allChannels: [],
      // 固定频道id
      // 这样做方便管理
      fixChannels: [0]
    }
  },
  methods: {
    // 控制关闭图片的显示和隐藏
    cellBtn() {
      if (this.clear) {
        this.clear = ''
      } else {
        this.clear = 'clear'
      }
    },
    // 获取所有频道列表的函数
    async getAllChannel() {
      try {
        var { data: res } = await getAllChannels()
      } catch {
        return this.$toast.fail('请求所有频道列表失败')
      }
      this.allChannels = res.data.channels
    },
    // 添加频道至我的频道中
    toMyChannel(val) {
      this.$emit('toMyChannel', val)
    },
    // 切换或删除频道
    toggle_deleteChannel(id) {
      if (this.clear) {
        // 删除频道函数
        return this.$emit('deleteChananel', id, this.fixChannels)
      }
      // 切换频道函数
      this.$emit('toggleChananel', id)
    }
  },
  computed: {
    filterChannels() {
      // 数组的内置Api
      return this.allChannels.filter((val) => {
        return !this.myChannels.find((item) => {
          return val.id === item.id
        })
      })
    }
  },
  created() {
    this.getAllChannel()
  }
}
</script>

<style lang="less" scoped>
.popup-content {
  padding: 85px 0;
  .popText {
    font-size: 32px;
    color: #333;
  }
  .popEditBtn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border-color: #f85959;
  }
  .van-cell {
    align-items: center;
  }
  /deep/ .popGrid {
    width: 160px;
    height: 86px;
    .van-grid-item__content--center {
      background-color: #f4f5f6;
      .van-grid-item__icon {
        font-size: 28px;
        color: #222;
      }
    }
    .van-grid-item__content {
      padding: 0;
    }
    .van-grid-item__text {
      margin-left: 6px;
      color: #222;
      font-size: 28px;
      max-width: 170px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow-x: hidden;
    }
  }
  /deep/ .myGrid {
    .van-grid-item__text {
      margin: 0;
    }
    .van-icon {
      position: absolute;
      top: -10px;
      right: -10px;
      font-size: 30px !important;
      color: #cacaca !important;
      z-index: 2;
    }
    .gridActive {
      .van-grid-item__text {
        color: red !important;
      }
    }
  }
}
</style>
